<template>
  <div class="container shopList">
    <div class="shop-title">
      <div>选择店铺</div>
      <text>以下是您创建或加入的店铺</text>
    </div>
    <div v-for="(item, index) in shopList" :key="index" class="shop-item" @click="goToHome(item.shop_id, item.hq_id)">
      <img :src="item.logo_url" alt="">
      <div class="shop-item-tel">
        <div>{{item.short_name}}</div>
        <text>{{item.emp_name}} {{item.contacts_tel}}</text>
      </div>
    </div>
  </div>
</template>
<script>
import API from '@/utils/api'
import STATE from '@/utils/state'
export default {
  data () {
    return {
      username: '',
      shopList: []
    }
  },
  methods: {
    goToHome (shopId, hqId) {
      wx.switchTab({
        url: `../home/main`
      })
      STATE.shopInfo.username = this.username
      STATE.shopInfo.shopId = shopId
      STATE.shopInfo.hqId = hqId
    },
    getShopList () {
      let that = this
      wx.showLoading({
        title: '加载中...'
      })
      wx.request({
        url: `${API.SHOP.LIST}?userName=${that.username}`,
        method: 'GET',
        header: {
          'content-type': 'application/json', // 默认值
          'cookie': wx.getStorageSync('SESSID')
        },
        success (res) {
          if (res.data.code === 0) {
            that.shopList = res.data.data
            wx.hideLoading()
          }
        }
      })
    }
  },
  onLoad (options) {
    this.username = options.username
    this.getShopList()
  }
}
</script>
<style scoped>
  .shopList>div {
    width: 90%;
  }
  .shop-title {
    font-size: 48rpx;
    line-height: 48rpx;
    color: #38505B;
    margin-top: 20rpx;
  }
  .shop-title text {
    font-size: 32rpx;
    color: #9599AB;
  }
  .shop-item {
    border: 1rpx solid #9599AB;
    border-radius: 8rpx;
    box-shadow: 1px 1px 2px #9599AB;
    margin: 10rpx 0;
    padding: 20rpx 0; 
    display: flex;
    align-items: center;
  }
  .shop-item img {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 20rpx;
    margin-right: 20rpx;
  }
  .shop-item-tel text {
    font-size: 32rpx;
    color: #9599AB;
  }
</style>